<template>
  <el-container id="loginView">
    <el-header height="170px">
      <h1>盛辉物流后台管理系统</h1>
    </el-header>
    <el-main>
      <el-row>
        <el-col :span="5" :offset="3">
          <div class="grid-content">
            <div class="menu" :class="{menuActive: loginActive}" @click="loginActives">
              <img v-if="loginActive" src="~assets/img/login/loginActive.png" alt="">
              <img v-else src="~assets/img/login/login.png" alt="">
              登录
            </div>
            <div class="menu" :class="{menuActive: !loginActive}" @click="pwdActives">
              <img v-if="!loginActive" src="~assets/img/login/pwdActive.png" alt="">
              <img v-else src="~assets/img/login/password.png" alt="">
              忘记密码
            </div>
          </div>
        </el-col>
        <el-col :span="13" class="right-box">
          <div class="grid-content">
            <login v-show="loginActive" @loginSubmit="loginSubmit"></login>
            <forget-pwd v-show="!loginActive" @updSubmit="updSubmit"></forget-pwd>
          </div>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import Login from './components/Login.vue'
import ForgetPwd from './components/ForgetPwd.vue'

import {updEmp} from 'network/employee'

import {getEmpByAccPwd} from 'network/employee.js'

export default {
	data(){
		return {
      loginActive: true
		}
	},
	components: {
    Login,
    ForgetPwd
  },
  methods: {
    loginActives() {
      this.loginActive = true
    },
    pwdActives() {
      this.loginActive = false
    },
    loginSubmit(loginInfo) {//前端登录验证通过执行会执行此函数
      //进行后端验证后获取验证结果,后端验证通过后进行页面跳转
      getEmpByAccPwd(loginInfo.account,loginInfo.pass).then(res => {
        if(res != null && res != "") {
          sessionStorage.loginAccount = JSON.stringify(res)
          this.$router.push('/home')
        }else{
          alert("账号或密码错误")
        }
      }).catch(err => {
        console.log(err)
        alert("输入异常,请重试")
      })
    },
    updSubmit(updInfo) {
      updEmp({empTel:updInfo.phone,empPwd:updInfo.pass}).then(res => {
        if(res > 0) {
          alert("修改成功")
        }else{
          alert("修改失败,请稍后重试")
        }
      }).catch(err => {
        console.log(err)
        alert("输入异常,请重试")
      })
    }
  }
}
</script>

<style scoped>
  .el-container{
    height: 100%;
  }
  .el-header h1{
    margin: 60px auto;
    text-align: center;
    font-size: 45px;
    color:var(--color-high-text);
  }
  .el-main{
    margin: 0 auto;
    width: 70%;
    min-width: 700px;
  }
  .grid-content {
    height: 370px;
    background-color: white;
    overflow: hidden;
  }

  .right-box{
    border-left: 0.2px solid black;
    
  }

  .menu{
    width: 100%;
    min-height: 185px;
    text-align: center;
  }
  .menu img{
    display: block;
    padding-top: 55px;
    margin: 0% auto;
    padding-bottom: 10px;
  }

  .menuActive{
    background-color: var(--color-high-text);
    color: white;
  }

  #loginView{
    background: url("~assets/img/login/bg.png") no-repeat;
    background-size: 100%;
  }
</style>
